<!-- 在现有的样式表之后添加 -->
<link rel="stylesheet" href="../assets/thewakingsands/axis-font-icons/axis-font-icons@0.4.0.css">

<!-- 引入 EorzeaTime.js -->
<script src="../assets/thewakingsands/EorzeaTime_localized.js"></script>

<!-- 添加时间栏 -->
<div class="time-bar" style="position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.9); color: white; text-align: center; padding: 8px 0; font-size: 0.9rem; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.3);">
    <i class="xiv local-time"></i>
    <span id="current-time">加载中...</span>
    <i class="xiv eorzea-time"></i>
    <span id="eorzea-time">加载中...</span>
    <span style="margin: 0 10px;">|</span>
    <span id="current-date">加载中...</span>
    <span style="margin: 0 10px;">|</span>
    <span id="day-of-week">加载中...</span>
</div>

<style>
    /* 时间栏样式 */
    .time-bar {
        background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 30%, #4a1e6b 100%);
        color: white;
        text-align: center;
        padding: 8px 0;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: relative;
        z-index: 1000;
    }

    .time-bar span {
        margin: 0 8px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .time-bar {
            font-size: 0.8rem;
            padding: 6px 0;
        }

        .time-bar span {
            margin: 0 4px;
        }
    }
</style>

<section class="menu cid-s48OLK6784" once="menu" id="menu1-h">
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
        <div class="container">
            <div class="navbar-brand">
						<span class="navbar-logo">
							<a href="../index.html#features14-t">
								<img src="../assets/images/frame-1-121x121.png" alt="Mobirise" style="height: 3.8rem;">
							</a>
						</span>
                <span class="navbar-caption-wrap"><a class="navbar-caption text-white text-primary display-7" href="../index.html">Phantoms</a></span>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-dropdown nav-right" data-app-modern-menu="true">
                    <li class="nav-item dropdown">
                        <a class="nav-link link text-white text-primary dropdown-toggle display-4" href="#" data-toggle="dropdown-submenu" aria-expanded="false">HOME</a>
                        <div class="dropdown-menu">
                            <a class="text-white text-primary dropdown-item display-4" href="../index.html" aria-expanded="false">Top</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../index.html#features14-t">Detail</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../http_test.html">Switch Line</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link link text-white text-primary dropdown-toggle display-4" href="#" aria-expanded="true" data-toggle="dropdown-submenu">About FC</a>
                        <div class="dropdown-menu">
                            <a class="text-white text-primary dropdown-item display-4" href="../history.html#" aria-expanded="false">History</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../risingstones/guild-member_formed.html#" aria-expanded="false">Members</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../profiles/profiles_formed.html#" data-mobile-href="../profiles/profiles-mobile_formed.html#" aria-expanded="false">Member Profiles</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../expeditionary/editableTable.html"
                               data-mobile-href="../expeditionary/editableTable-mobile.html" target="_blank">
                                Expeditionary</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link link text-white text-primary dropdown-toggle display-4" href="#" aria-expanded="true" data-toggle="dropdown-submenu">Tools</a>
                        <div class="dropdown-menu">
                            <a class="text-light text-primary dropdown-item display-4" href="../tools.html" data-mobile-href="../tools-mobile.html" aria-expanded="false">All Tools Index</a>
                            <a class="text-light text-primary dropdown-item display-4" href="https://svdernbi.ap-southeast-1.clawcloudrun.com" aria-expanded="false" target="_blank">File server(Testing)</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/xivpf.html#" aria-expanded="false">Remote Party Finder</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/BlueMagicebook.html#" aria-expanded="false">BlueMagicbook</a>
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../tools/V5.html#" aria-expanded="false">V5配方计算器</a>-->
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/crafter.html#" aria-expanded="false">V7生产模拟器</a>
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../tools/wanahome.html#" aria-expanded="false">I Wanna Home</a>-->
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/house_ffxiv_cyou.html#" aria-expanded="false">艾欧泽亚售楼中心</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/fauxhollowsprobabilisticsolver.html#" aria-expanded="false">幻巧拼图计算器</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/what-zc-today.html#" aria-expanded="false">今天什么战场</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/wakingsands.html#" aria-expanded="false">XIV 文本检索</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/ffxiv-weather.html#" aria-expanded="false">天气查询</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../tools/InteractiveMap.html#" aria-expanded="false">交互地图</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link link text-white text-primary dropdown-toggle display-4" href="#" aria-expanded="true" data-toggle="dropdown-submenu">Community</a>
                        <div class="dropdown-menu">
                            <a class="text-white text-primary dropdown-item display-4" href="../messageBoard/messageBoard_formed.html#" aria-expanded="false">Message Board</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../chatRecords_formed.html#" aria-expanded="false">Chat Room</a>
                            <a class="text-white text-primary dropdown-item display-4" href="../risingstones/guild-member-dynamic.html"
                               target="_blank">Feed</a>
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../messageBoard/user_conf/registerUser.html#" aria-expanded="false">Register</a>-->
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../additions/foot/login.html#" aria-expanded="false">Login</a>-->
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../messageBoard/user_conf/userListWithProfile_fromed.html#" aria-expanded="false">User List</a>-->
<!--                            <a class="text-white text-primary dropdown-item display-4" href="../messageBoard/user_conf/updateProfilie.html#" aria-expanded="false">Upload Profile</a>-->
                            <a class="text-light text-primary dropdown-item display-4" href="https://oopz.cn/i/9XgUt9" target="_blank">Oopz</a>
                            <a class="text-light text-primary dropdown-item display-4" href="../Kook.html" aria-expanded="false">Kook</a>
                            <a class="text-light text-primary dropdown-item display-4" href="https://swzlutsfsivu.ap-southeast-1.clawcloudrun.com" target="_blank">VoceChat(Testing)</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link link text-white text-primary dropdown-toggle display-4" href="#" aria-expanded="true" data-toggle="dropdown-submenu">Gallery</a>
                        <div class="dropdown-menu">
                            <a class="text-light text-primary dropdown-item display-4" href="../albums.html#" aria-expanded="false">Albums</a>
                            <a class="text-light text-primary dropdown-item display-4" href="../artExhibition.html#" aria-expanded="false">Arts Exhibition</a>
                            <a class="text-light text-primary dropdown-item display-4" href="../album/DynamicWallpaper.html#" aria-expanded="false">Dynamic Wallpaper</a>
                            <a class="text-light text-primary dropdown-item display-4" href="../album/showImages.html" target="_blank">Images(Testing)</a>
                            <a class="text-light text-primary dropdown-item display-4" href="../uploadImage_formed.html#" aria-expanded="false">Upload Img(Testing)</a>
                        </div>
                    </li>
                </ul>
                <div class="icons-menu">
                    <a class="iconfont-wrapper" href="https://ff.web.sdo.com/finder/" target="_blank">
                        <span class="p-2 mbr-iconfont mobi-mbri-file mobi-mbri" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://jq.qq.com/?_wv=1027&k=FSun33H0" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-qq socicon" style="color: rgb(34, 165, 229); fill: rgb(34, 165, 229);"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://weibo.com/5722698883/LnwkL1Fk2" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-weibo socicon" style="color: rgb(34, 165, 229); fill: rgb(34, 165, 229);"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://oopz.cn/i/9XgUt9" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-discord socicon" style="color: rgb(34, 165, 229); fill: rgb(34, 165, 229);"></span>
                    </a>
                    <a class="iconfont-wrapper" href="https://github.com/YukiRinLL/FFXIV_Phantoms_MainPage" target="_blank">
                        <span class="p-2 mbr-iconfont socicon-github socicon" style="color: rgb(34, 165, 229); fill: rgb(34, 165, 229);"></span>
                    </a>
                </div>
            </div>
        </div>
    </nav>
</section>

<script>
    // 更新时间函数
    function updateTime() {
        const now = new Date();

        // 格式化本地时间
        const timeString = now.toLocaleTimeString('zh-CN', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });

        // 格式化日期
        const dateString = now.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        });

        // 星期几
        const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        const dayOfWeek = weekdays[now.getDay()];

        // 更新本地时间显示
        document.getElementById('current-time').textContent = timeString;
        document.getElementById('current-date').textContent = dateString;
        document.getElementById('day-of-week').textContent = dayOfWeek;

        // 计算并更新艾欧泽亚时间
        updateEorzeaTime(now);
    }

    // 更新艾欧泽亚时间函数
    function updateEorzeaTime(realTime) {
        try {
            const et = new EorzeaTime(realTime.getTime());
            const eorzeaHour = et.getHour().toString().padStart(2, '0');
            const eorzeaMinute = et.getMinute().toString().padStart(2, '0');
            const eorzeaTimeString = `${eorzeaHour}:${eorzeaMinute}`;

            document.getElementById('eorzea-time').textContent = eorzeaTimeString;
        } catch (error) {
            console.error('计算艾欧泽亚时间时出错:', error);
            document.getElementById('eorzea-time').textContent = '计算错误';
        }
    }

    // 页面加载时立即更新时间
    updateTime();

    // 每秒更新一次时间
    setInterval(updateTime, 1000);

    // 改进的移动端链接调整功能
    let linkObserver = null;

    // 初始化链接存储
    function initLinkStorage() {
        const links = document.querySelectorAll('a[data-mobile-href]');
        links.forEach(function(link) {
            // 存储原始链接
            if (!link.hasAttribute('data-original-href')) {
                link.setAttribute('data-original-href', link.getAttribute('href'));
            }
        });
    }

    // 检测是否为移动设备
    function isMobileDevice() {
        return window.innerWidth <= 768 ||
            /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    // 调整链接函数
    function adjustLinks() {
        const links = document.querySelectorAll('a[data-mobile-href]');
        const isMobile = isMobileDevice();

        console.log(`调整链接: 移动端=${isMobile}, 找到${links.length}个链接`);

        links.forEach(function(link) {
            if (isMobile) {
                // 移动端：使用移动端链接
                const mobileHref = link.getAttribute('data-mobile-href');
                if (mobileHref && link.href !== mobileHref) {
                    link.href = mobileHref;
                    console.log(`设置为移动端链接: ${mobileHref}`);
                }
            } else {
                // 桌面端：恢复原始链接
                const originalHref = link.getAttribute('data-original-href');
                if (originalHref && link.href !== originalHref) {
                    link.href = originalHref;
                    console.log(`恢复桌面端链接: ${originalHref}`);
                }
            }
        });
    }

    // 监听DOM变化
    function observeDynamicContent() {
        if (linkObserver) {
            linkObserver.disconnect();
        }

        linkObserver = new MutationObserver(function(mutations) {
            let shouldAdjust = false;
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    // 检查新增的节点中是否有需要处理的链接
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1) { // Element node
                            if (node.matches && node.matches('a[data-mobile-href]')) {
                                shouldAdjust = true;
                            }
                            if (node.querySelectorAll) {
                                const links = node.querySelectorAll('a[data-mobile-href]');
                                if (links.length > 0) {
                                    shouldAdjust = true;
                                }
                            }
                        }
                    });
                }
            });

            if (shouldAdjust) {
                initLinkStorage();
                adjustLinks();
            }
        });

        linkObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
    }

    // 页面加载完成后的初始化
    document.addEventListener("DOMContentLoaded", function() {
        // 初始化链接存储
        initLinkStorage();

        // 立即调整链接
        adjustLinks();

        // 开始监听DOM变化
        observeDynamicContent();

        // 监听窗口大小变化
        window.addEventListener('resize', adjustLinks);

        // 监听页面显示变化（处理浏览器标签页切换）
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                setTimeout(adjustLinks, 100);
            }
        });
    });

    // 确保在页面完全加载后再次检查
    window.addEventListener('load', function() {
        setTimeout(adjustLinks, 500);
    });
</script>